<template>
	<div >
		<div class="article-list">
			<YRCardTitle title="最新文章"></YRCardTitle>
			<div class="article-content" v-for="(item,index) in articleList" :key="index">
				<h1 class="art-title"> 
					<a  @click="toArticleContent(item)">{{item.title}}</a>
				</h1>
				<div class="art-content">
					<a href="#" v-show="item.cover">
						<div class="bg-img" :style="{backgroundImage:'url('+item.cover+')'}"></div>
					</a>
					<p class="desc">
						{{item.description}}
					</p>
				</div>
				<div class="art-footer">
					<time class="bot"><Icon type="md-clock" /> {{item.createTime|dateformatDate}}</time>
					<span class="bot"><Icon type="md-eye" /> {{item.readNum}}次阅读</span>
					<span class="bot"><Icon type="md-heart" /> {{item.likeNum}}个喜欢</span>
					<Tag  fade v-for="(tag,tagIndex) in item.articleTagPojoList" :key="tagIndex" 
					:color="tag.color" >{{tag.name}}</Tag>
				</div>
			</div>
			<Spin size="large" fix v-if="spinShow"></Spin>
		</div>
		<div class="page">
			<Page :total="param.total" :current="param.current" :page-size="param.size" @on-change="getArticlePage"/>
		</div>
	</div>
	
</template>

<script>
import YRCardTitle from '@/components/common/YRCardTitle.vue';	
import {mapMutations,mapState} from 'vuex';
export default {
  name: 'ArticleList',
  components:{
	YRCardTitle
  },
  props: {
	title:String
  },
  data:()=>{
	return{
		param:{
			current:1,
			size:5,
			total:0,
			params:{
				tagId:-1,
				type:1,//技术博客
			}
		},
		articleList:[],
		spinShow:false,//加载中
	}  
  },
  methods:{
	...mapMutations(["setArticleContent"]), 
	initQueryParam(){
		this.param.params.tagId = Number(this.$route.query.tagId);
	},
	getArticlePage(current){
		this.initQueryParam();
		this.param.current=current||1;
		this.spinShow = true;
		this.$http.post("/api/article/getArticlePage",this.param).then(res=>{
			this.articleList = res.records;              
			this.param.total  = res.total;
			this.spinShow = false;
		})
	},
	toArticleContent(item){
		this.$router.push({path:`/article/articleContent`,query:{id:item.id}});
	}
	
  },
  created(){
	this.getArticlePage();
  },
  computed:{
	...mapState({tagIdList:"tagIdList"}),    
  },
  watch: {
	'$route' () {
		// 对路由变化作出响应...
		// 解决相同组件间跳转 组件被复用 周期函数失效
		this.getArticlePage(1);
	}
  }
}
</script>

<style lang="stylus" scoped>
.ivu-tag
	height: 18px;
	line-height 18px
	opacity 0.6
.article-list
	height 100%
	background: #fff
	border-radius:10px
	min-height: 60vh
	position relative
	box-shadow 0 0 0 1px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
	.article-content 
		width 100%
		padding 0px 20px
		border-top: 1px solid #eee
		.art-title
			font-size: 24px 
			font-weight 400
			line-height 30px
			margin-top 20px
			a
				color: #444
		.art-content
			font-size: 14px
			margin: 0
			color: #696969
			line-height: 24px
			letter-spacing: 1px
			overflow hidden
			min-height 80px
			.desc
				letter-spacing: 1px
			.bg-img
				float: right
				margin-left: 10px
				margin-bottom: 10px
				height: auto
				height 120px
				width 140px
				box-sizing: border-box
				border: 0
				transition: all 0.2s ease-in
				opacity: .7 !important
				background-size cover
				background-position center
				background-repeat no-repeat
				border-radius 5px
				box-shadow 0 0 0 1px rgba(188, 188, 188, 0.01), 0 4px 10px rgba(0,0,0,0.06)
			.bg-img:hover
				opacity: 1 !important
		.art-footer
			width 100%
			height 35px
			.bot 
				line-height 35px
				color #8f8f8f
				font-size 14px
				padding-right 15px
				cursor pointer
			.tag
				margin 0 10px
.page
	width 100%
	text-align center
	padding-top 15px
</style>
